<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>小米</title>
    <link rel="stylesheet" href="main.css" />
    <link rel="stylesheet" href="header.css" />
    <link rel="stylesheet" href="footer.css" />
  </head>

  <body>
    <div class="topbar">
      <div class="topbar-inner">
        <ul class="topbar-links">
          <li style="margin-left: 0; padding: 0"><a href="#">小米网</a></li>
          <li><a href="#">MIUI</a></li>
          <li><a href="#">米聊</a></li>
          <li><a href="#">游戏</a></li>
          <li><a href="#">多看阅读</a></li>
          <li><a href="#">云服务</a></li>
          <li><a href="#">小米网移动版</a></li>
          <li><a href="#">问题反馈</a></li>
          <li style="border: 0"><a href="#">Select Region</a></li>
        </ul>
        <div class="user-area">
          <div class="cart-box">
            <div class="cart-button">购物车(0)</div>
            <div class="cart-panel">购物车中还没有商品，赶紧选购吧！</div>
          </div>
          <ul>
            <li><a href="#">登录</a></li>
            <li style="border: 0"><a href="#">注册</a></li>
          </ul>
        </div>
      </div>
      <div class="clearfix"></div>
    </div>

    <div class="navbar">
      <div class="brand">
        <img src="images/LOGO.png" /><img src="images/donghua.gif" />
      </div>
      <ul class="category-links">
        <li><a href="#">小米盒子</a></li>
        <li><a href="#">红米</a></li>
        <li><a href="#">平板</a></li>
        <li><a href="#">电视</a></li>
        <li><a href="#">盒子</a></li>
        <li><a href="#">路由器</a></li>
        <li><a href="#">智能硬件</a></li>
        <li><a href="#">服务</a></li>
        <li><a href="#">社区</a></li>
      </ul>
      <div class="search">
        <div class="search-icon"><img src="images/search.png" /></div>
        <span>平衡车</span>
        <span>小米手机4c</span>
      </div>

    <div class="carousel">
      <div class="arrow-next"><img src="images/arrow_rightbtn01.png" /></div>
      <div class="arrow-prev"><img src="images/arrow_leftbtn01.png" /></div>
      <div class="carousel-track">
        <img src="images/banner01.jpg" />
        <img src="images/banner02.jpg" />
        <img src="images/banner03.jpg" />
        <img src="images/banner04.jpg" />
        <img src="images/banner05.jpg" />
      </div>
      <div class="dots">
        <div class="dot active"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
      </div>
      <div class="side-menu">
        <ul>
          <li>
            手机 平板 电话卡<span>&gt;</span>
            <div class="submenu">
              <div style="float: left; margin-right: 23px">
                <img src="images/phone_img.png" />
              </div>
              <div style="float: left; margin-right: 40px">
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
              </div>
              <div style="float: left; padding-top: 5px; margin-right: 34px">
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
              </div>
              <div style="float: left; margin-right: 23px">
                <img src="../小米2/images/左1.png" />
              </div>
              <div style="float: left; margin-right: 40px">
               <a href="#"></a>
               <a href="#"></a>
               <a href="#"></a>
               <a href="#"></a>
               <a href="#"></a>
               <a href="#"></a>
               <a href="#"></a>
              </div>
              <div style="float: left; padding-top: 5px">
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
              </div>
            </div>
          </li>
          <li>
            电视 盒子<span>&gt;</span>
            <div class="submenu">
              <div style="float: left; margin-right: 23px">
                <img src="images/phone_img.png" />
              </div>
              <div style="float: left; margin-right: 40px">
              <a href="#"></a>
              <a href="#"></a>
              <a href="#"></a>
              <a href="#"></a>
              <a href="#"></a>
              <a href="#"></a>
              <a href="#"></a>
              </div>
              <div style="float: left; padding-top: 5px; margin-right: 34px">
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
              </div>
              <div style="float: left; margin-right: 23px">
                <img src="../小米2/images/左1.png" />
              </div>
              <div style="float: left; margin-right: 40px">
              <a href="#"></a>
              <a href="#"></a>
              <a href="#"></a>
              <a href="#"></a>
              <a href="#"></a>
              <a href="#"></a>
              <a href="#"></a>
              </div>
              <div style="float: left; padding-top: 5px">
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
              </div>
            </div>
          </li>
          <li>
            路由器 智能硬件<span>&gt;</span>
            <div class="submenu">
              <div style="float: left; margin-right: 23px">
                <img src="images/phone_img.png" />
              </div>
              <div style="float: left; margin-right: 40px">
              <a href="#"></a>
              <a href="#"></a>
              <a href="#"></a>
              <a href="#"></a>
              <a href="#"></a>
              <a href="#"></a>
              <a href="#"></a>
              </div>
              <div style="float: left; padding-top: 5px; margin-right: 34px">
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
              </div>
              <div style="float: left; margin-right: 23px">
                <img src="../小米2/images/左1.png" />
              </div>
              <div style="float: left; margin-right: 40px">
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
              </div>
              <div style="float: left; padding-top: 5px">
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
              </div>
            </div>
          </li>
          <li>
            移动电源 插线板<span>&gt;</span>
            <div class="submenu">
              <div style="float: left; margin-right: 23px">
                <img src="images/phone_img.png" />
              </div>
              <div style="float: left; margin-right: 40px">
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
              </div>
              <div style="float: left; padding-top: 5px; margin-right: 34px">
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
              </div>
              <div style="float: left; margin-right: 23px">
                <img src="../小米2/images/左1.png" />
              </div>
              <div style="float: left; margin-right: 40px">
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
              </div>
              <div style="float: left; padding-top: 5px">
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
              </div>
            </div>
          </li>
          <li>
            耳机 音箱<span>&gt;</span>
            <div class="submenu">
              <div style="float: left; margin-right: 23px">
                <img src="images/phone_img.png" />
              </div>
              <div style="float: left; margin-right: 40px">
               <a href="#"></a>
               <a href="#"></a>
               <a href="#"></a>
               <a href="#"></a>
               <a href="#"></a>
               <a href="#"></a>
               <a href="#"></a>
              </div>
              <div style="float: left; padding-top: 5px; margin-right: 34px">
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
              </div>
              <div style="float: left; margin-right: 23px">
                <img src="../小米2/images/左1.png" />
              </div>
              <div style="float: left; margin-right: 40px">
               <a href="#"></a>
               <a href="#"></a>
               <a href="#"></a>
               <a href="#"></a>
               <a href="#"></a>
               <a href="#"></a>
               <a href="#"></a>
              </div>
              <div style="float: left; padding-top: 5px">
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
              </div>
            </div>
          </li>
          <li>
            电池 存储卡<span>&gt;</span>
            <div class="submenu">
              <div style="float: left; margin-right: 23px">
                <img src="images/phone_img.png" />
              </div>
              <div style="float: left; margin-right: 40px">
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
              </div>
              <div style="float: left; padding-top: 5px; margin-right: 34px">
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
              </div>
              <div style="float: left; margin-right: 23px">
                <img src="../小米2/images/左1.png" />
              </div>
              <div style="float: left; margin-right: 40px">
              <a href="#"></a>
              <a href="#"></a>
              <a href="#"></a>
              <a href="#"></a>
              <a href="#"></a>
              <a href="#"></a>
              <a href="#"></a>
              </div>
              <div style="float: left; padding-top: 5px">
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
              </div>
            </div>
          </li>
          <li>
            保护套 后盖<span>&gt;</span>
            <div class="submenu">
              <div style="float: left; margin-right: 23px">
                <img src="images/phone_img.png" />
              </div>
              <div style="float: left; margin-right: 40px">
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
              </div>
              <div style="float: left; padding-top: 5px; margin-right: 34px">
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
              </div>
              <div style="float: left; margin-right: 23px">
                <img src="../小米2/images/左1.png" />
              </div>
              <div style="float: left; margin-right: 40px">
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
              </div>
              <div style="float: left; padding-top: 5px">
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
              </div>
            </div>
          </li>
          <li>
            贴膜 其他配件<span>&gt;</span>
            <div class="submenu">
              <div style="float: left; margin-right: 23px">
                <img src="images/phone_img.png" />
              </div>
              <div style="float: left; margin-right: 40px">
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
              </div>
              <div style="float: left; padding-top: 5px; margin-right: 34px">
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
              </div>
              <div style="float: left; margin-right: 23px">
                <img src="../小米2/images/左1.png" />
              </div>
              <div style="float: left; margin-right: 40px">
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
              </div>
              <div style="float: left; padding-top: 5px">
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
              </div>
            </div>
          </li>
          <li>
            米兔 服装<span>&gt;</span>
            <div class="submenu">
              <div style="float: left; margin-right: 23px">
                <img src="images/phone_img.png" />
              </div>
              <div style="float: left; margin-right: 40px">
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
              </div>
              <div style="float: left; padding-top: 5px; margin-right: 34px">
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
              </div>
              <div style="float: left; margin-right: 23px">
                <img src="../小米2/images/左1.png" />
              </div>
              <div style="float: left; margin-right: 40px">
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
              </div>
              <div style="float: left; padding-top: 5px">
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
              </div>
            </div>
          </li>
          <li>
            箱包 其他周边<span>&gt;</span>
            <div class="submenu">
              <div style="float: left; margin-right: 23px">
                <img src="images/phone_img.png" />
              </div>
              <div style="float: left; margin-right: 40px">
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
              </div>
              <div style="float: left; padding-top: 5px; margin-right: 34px">
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
              </div>
              <div style="float: left; margin-right: 23px">
                <img src="../小米2/images/左1.png" />
              </div>
              <div style="float: left; margin-right: 40px">
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
              </div>
              <div style="float: left; padding-top: 5px">
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
                <div class="buy-button"><a href="#">选购</a></div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <div class="promo-bar">
      <div class="left-block"><img src="images/left.png" /></div>
      <div class="card">
        <a href="#"><img src="images/subnav_icon01.png" /></a>
      </div>
      <div class="card">
        <a href="#"><img src="images/subnav_icon02.jpg" /></a>
      </div>
      <div class="card" style="margin-right: 0">
        <a href="#"><img src="images/subnav_icon03.png" /></a>
      </div>
      <div class="clearfix"></div>
    </div>
    <div class="featured-section">
      <div class="featured-title">
        小米明星单品
        <div class="right-arrow">&gt;</div>
        <div class="left-arrow">&lt;</div>
      </div>
      <div class="featured-list">
        <div
          class="product-card"
          style="
            border-top: 1px solid #ffac13;
            background: #fafafa url(images/chazuo.png) center 66px no-repeat;
          "
        >
          <p class="name">小米智能插座 基础版</p>
          <p style="margin-top: 10px; color: #b0b0b6">
            手机远程遥控，让普通电器变智能
          </p>
          <p class="price">49元</p>
        </div>
        <div
          class="product-card"
          style="
            border-top: 1px solid #83c44e;
            background: #fafafa url(images/jinghuaqi.png) center 44px no-repeat;
          "
        >
          <p class="name">小米空气净化器2</p>
          <p style="margin-top: 10px; color: #b0b0b6">净化能力高达310m3/h</p>
          <p class="price">699元</p>
        </div>
        <div
          class="product-card"
          style="
            border-top: 1px solid #2196f3;
            background: #fafafa url(images/chaban.png) center 97px no-repeat;
          "
        >
          <p class="name">小米智能插线板</p>
          <p style="margin-top: 10px; color: #b0b0b6">
            手机远程控制家中电器，智能节电
          </p>
          <p class="price">69元</p>
        </div>
        <div
          class="product-card"
          style="
            border-top: 1px solid #e53935;
            background: #fafafa url(images/erji.png) center 56px no-repeat;
          "
        >
          <p class="name">小米圈铁耳机</p>
          <p style="margin-top: 10px; color: #b0b0b6">动圈+动铁，双发声单元</p>
          <p class="price">69元</p>
        </div>
        <div
          class="product-card"
          style="
            margin-right: 0;
            border-top: 1px solid #00c0a5;
            background: #fafafa url(images/luyouqi.png) center 54px no-repeat;
          "
        >
          <p class="name">小米路由器 青春版</p>
          <p style="margin-top: 10px; color: #b0b0b6">
            将高性能路由器，凝聚于掌心大小
          </p>
          <p class="price">79元</p>
        </div>
      </div>
    </div>
    <div class="light-bg">
      <div class="container">
        <div class="section-title smart-title">
          智能硬件
          <div class="smart-actions">
            <img style="float: right" src="images/hardware_morebtn.png" />
            <a href="#">查看全部</a>
          </div>
        </div>
        <div
          class="smart-left"
          style="background: url(images/haraware_kid.png) center top no-repeat"
        >
          <p>米兔儿童电话手表</p>
          <p class="subtitle">安全防走失，宝贝的贴身护卫</p>
          <p class="amount">299<a style="font-size: 14px">元</a></p>
        </div>
        <div class="smart-right">
          <div class="smart-row">
            <div
              class="smart-card"
              style="
                background: #fff url(images/haraware_tizhongcheng.png) center
                  115px no-repeat;
              "
            >
              <p class="name">小米体重秤</p>
              <p class="description">高精度压力传感器，手机管理全家健康</p>
              <p class="price">99元</p>
            </div>
            <div
              class="smart-card"
              style="
                background: #fff url(images/haraware_luyouqi.png) center 20px
                  no-repeat;
              "
            >
              <p class="name">小米路由器3</p>
              <p class="description">更安全更稳定，安全发售</p>
              <p class="price">149元</p>
            </div>
            <div
              class="smart-card"
              style="
                background: #fff url(images/haraware_shouhuan.png) center 20px
                  no-repeat;
              "
            >
              <p class="name">小米手环 光感版</p>
              <p class="description">实时监测心率，科学运动</p>
              <p class="price">99元</p>
            </div>
            <div
              class="smart-card"
              style="
                background: #fff url(images/haraware_anfang.png) center 20px
                  no-repeat;
              "
            >
              <p class="name">小米智能安防套装</p>
              <p class="description">智能警戒，为您的家增添一份安心</p>
              <p class="price">699元</p>
            </div>
          </div>
          <div class="smart-row" style="margin-bottom: 0">
            <div
              class="smart-card"
              style="
                background: #fff url(images/haraware_xiaoyi.png) center 20px
                  no-repeat;
              "
            >
              <p class="name">小米运动相机</p>
              <p class="description">边玩边录边拍，手机随时分享</p>
              <p class="price">399元</p>
            </div>
            <div
              class="smart-card"
              style="
                background: #fff url(images/haraware_xieya.png) center 20px
                  no-repeat;
              "
            >
              <p class="name">iHealth智能血压计（蓝牙版）</p>
              <p class="description">送给父母的健康礼物</p>
              <p class="price">199元</p>
            </div>
            <div
              class="smart-card"
              style="
                background: #fff url(images/haraware_shexiangtou.png) center
                  20px no-repeat;
              "
            >
              <p class="name">小米智能摄像机 夜视版</p>
              <p class="description">能看能听能说，手机远程观看</p>
              <p class="price">149元</p>
            </div>
            <div
              class="smart-card"
              style="
                background: #fff url(images/haraware_light.png) center 34px
                  no-repeat;
              "
            >
              <p class="name">Yeelight床头灯</p>
              <p class="description">触摸式操作，给卧室1600万种颜色</p>
              <p class="price">699元</p>
            </div>
          </div>
        </div>
        <div class="clearfix"></div>
      </div>
      <div class="container">
        <div class="section-title category-title">
          搭配
          <ul>
            <li class="active">热门</li>
            <li>耳机音箱</li>
            <li>电源</li>
            <li style="margin-right: 0">电池储存卡</li>
          </ul>
        </div>
        <div class="category-left">
          <div class="box"><img src="images/dapei_icon01.png" /></div>
          <div class="box"><img src="images/dapei_icon02.png" /></div>
        </div>
        <div class="category-right">
          <div class="category-row">
            <div
              class="category-card"
              style="
                background: #fff url(images/dapei_icon03.png) center 46px
                  no-repeat;
              "
            >
              <p class="name">小米路由器3</p>
              <p class="description">更安全更稳定，安全发售</p>
              <p class="price">149元</p>
            </div>
            <div
              class="category-card"
              style="
                background: #fff url(images/dapei_icon04.png) center 46px
                  no-repeat;
              "
            >
              <p class="name">小米手环 光感版</p>
              <p class="description">实时监测心率，科学运动</p>
              <p class="price">99元</p>
            </div>
            <div
              class="category-card"
              style="
                background: #fff url(images/dapei_icon05.png) center 100px
                  no-repeat;
              "
            >
              <p class="name">小米智能安防套装</p>
              <p class="description">智能警戒，为您的家增添一份安心</p>
              <p class="price">699元</p>
            </div>
            <div
              class="category-card"
              style="
                background: #fff url(images/dapei_icon06.png) center 46px
                  no-repeat;
              "
            >
              <p class="name">小米运动相机</p>
              <p class="description">边玩边录边拍，手机随时分享</p>
              <p class="price">399元</p>
            </div>
          </div>
          <div class="category-row" style="margin-bottom: 0">
            <div
              class="category-card"
              style="
                background: #fff url(images/dapei_icon07.png) center 49px
                  no-repeat;
              "
            >
              <p class="name">小米智能摄像机 夜视版</p>
              <p class="description">能看能听能说，手机远程观看</p>
              <p class="price">149元</p>
            </div>
            <div
              class="category-card"
              style="
                background: #fff url(images/dapei_icon08.png) center 55px
                  no-repeat;
              "
            >
              <p class="name">小米智能摄像机 夜视版</p>
              <p class="description">能看能听能说，手机远程观看</p>
              <p class="price">149元</p>
            </div>
            <div
              class="category-card"
              style="
                background: #fff url(images/dapei_icon09.png) center 58px
                  no-repeat;
              "
            >
              <p class="name">小米智能摄像机 夜视版</p>
              <p class="description">能看能听能说，手机远程观看</p>
              <p class="price">149元</p>
            </div>
            <div class="category-card" style="background-color: #f5f5f5">
              <div class="top-image" style="margin-bottom: 14px">
                <img src="images/content-top_icon01.png" />
              </div>
              <div class="top-image">
                <img src="images/content-top_icon02.png" />
              </div>
            </div>
          </div>
        </div>
        <div class="clearfix"></div>
      </div>
      <div class="container">
        <div class="section-title category-title">
          周边
          <ul>
            <li class="active">热门</li>
            <li>服装</li>
            <li>米兔</li>
            <li>生活周边</li>
            <li style="margin-right: 0">箱包</li>
          </ul>
        </div>
        <div class="category-left">
          <div class="box"><img src="images/peijian_icon01.png" /></div>
          <div class="box"><img src="images/peijian_icon02.png" /></div>
        </div>
        <div class="category-right">
          <div class="category-row">
            <div
              class="category-card"
              style="
                background: #fff url(images/peijian_icon03.png) center 36px
                  no-repeat;
              "
            >
              <p class="name">小米金属鼠标垫 小号</p>
              <p class="price">49元</p>
              <p class="description">6483人评价</p>
            </div>
            <div
              class="category-card"
              style="
                background: #fff url(images/peijian_icon04.png) center 36px
                  no-repeat;
              "
            >
              <p class="name">小米皮质记事本</p>
              <p class="price">19元</p>
              <p class="description">3050人评价</p>
            </div>
            <div
              class="category-card"
              style="
                background: #fff url(images/peijian_icon05.png) center 36px
                  no-repeat;
              "
            >
              <p class="name">小米LED随身灯 增强版</p>
              <p class="price">19.9元</p>
              <p class="description">5.6万人评价</p>
            </div>
            <div
              class="category-card"
              style="
                background: #fff url(images/peijian_icon06.png) center 36px
                  no-repeat;
              "
            >
              <p class="name">手机支架 小蜜蜂</p>
              <p class="price">19元</p>
              <p class="description">6.9万人评价</p>
            </div>
          </div>
          <div class="category-row" style="margin-bottom: 0">
            <div
              class="category-card"
              style="
                background: #fff url(images/peijian_icon07.png) center 45px
                  no-repeat;
              "
            >
              <p class="name">小米防尘塞 MI标</p>
              <p class="price">3.9元</p>
              <p class="description">5.6万人评价</p>
            </div>
            <div
              class="category-card"
              style="
                background: #fff url(images/peijian_icon08.png) center 45px
                  no-repeat;
              "
            >
              <p class="name">小米智能摄像机 夜视版</p>
              <p class="price">149元</p>
              <p class="description">8461人评价</p>
            </div>
            <div
              class="category-card"
              style="
                background: #fff url(images/peijian_icon09.png) center 45px
                  no-repeat;
              "
            >
              <p class="name">小米电源线收纳盒</p>
              <p class="price">39元</p>
              <p class="description">8461人评价</p>
            </div>
            <div class="category-card" style="background-color: #f5f5f5">
              <div class="top-image" style="margin-bottom: 14px">
                <img src="images/peijian_icon10.png" />
              </div>
              <div class="top-image">
                <img src="images/content-top_icon02.png" />
              </div>
            </div>
          </div>
        </div>
        <div class="clearfix"></div>
      </div>
      <div class="container">
        <div class="section-title category-title">
          配件
          <ul>
            <li class="active">热门</li>
            <li>保护套</li>
            <li>后盖</li>
            <li>贴膜</li>
            <li style="margin-right: 0">其他配件</li>
          </ul>
        </div>
        <div class="category-left">
          <div class="box"><img src="images/zhoubian_icon01.png" /></div>
          <div class="box"><img src="images/zhoubian_icon02.png" /></div>
        </div>
        <div class="category-right">
          <div class="category-row">
            <div
              class="category-card"
              style="
                background: #fff url(images/zhoubian_icon03.png) center 47px
                  no-repeat;
              "
            >
              <p class="name">小米自拍杆</p>
              <p class="price">49元</p>
              <p class="description">6.4万人评价</p>
            </div>
            <div
              class="category-card"
              style="
                background: #fff url(images/zhoubian_icon04.png) center 47px
                  no-repeat;
              "
            >
              <p class="name">小米手机5 钢化膜（0.22mm）</p>
              <p class="price">29元</p>
              <p class="description">1万人评价</p>
            </div>
            <div
              class="category-card"
              style="
                background: #fff url(images/zhoubian_icon05.png) center 47px
                  no-repeat;
              "
            >
              <p class="name">红米手机Note3 钢化膜（0.22mm）</p>
              <p class="price">699元</p>
              <p class="description">5.6万人评价</p>
            </div>
            <div
              class="category-card"
              style="
                background: #fff url(images/zhoubian_icon06.png) center 47px
                  no-repeat;
              "
            >
              <p class="name">小米Note 标准贴膜（2片装）</p>
              <p class="price">19元</p>
              <p class="description">2.1万人评价</p>
            </div>
          </div>
          <div class="category-row" style="margin-bottom: 0">
            <div
              class="category-card"
              style="
                background: #fff url(images/zhoubian_icon07.png) center 47px
                  no-repeat;
              "
            >
              <p class="name">小米随身WIFI</p>
              <p class="price">19.9元</p>
              <p class="description">30.1万人评价</p>
            </div>
            <div
              class="category-card"
              style="
                background: #fff url(images/zhoubian_icon08.png) center 47px
                  no-repeat;
              "
            >
              <p class="name">小米百变随身杯</p>
              <p class="price">39元</p>
              <p class="description">1.2万人评价</p>
            </div>
            <div
              class="category-card"
              style="
                background: #fff url(images/zhoubian_icon09.png) center 47px
                  no-repeat;
              "
            >
              <p class="name">小米手机5 硅胶保护套</p>
              <p class="price">69元</p>
              <p class="description">215人评价</p>
            </div>
            <div class="category-card" style="background-color: #f5f5f5">
              <div class="top-image" style="margin-bottom: 14px">
                <img src="images/zhoubian_icon10.png" />
              </div>
              <div class="top-image">
                <img src="images/content-top_icon02.png" />
              </div>
            </div>
          </div>
        </div>
        <div class="clearfix"></div>
      </div>
      <div class="container">
        <div class="section-title review-title">热评产品</div>
        <div class="review-card">
          <img src="images/hotproduct_icon01.png" />
          <div class="review-box">
            <p>
              超值正品，再也不会担心头那里时间久了坏掉，感觉升级版萌萌哒，既好用又好看
            </p>
            <h1>来自于 香草忘忧 的评价</h1>
            <a>米兔手机U盘</a><span style="color: #ff6700">49.9元</span>
          </div>
        </div>
        <div class="review-card">
          <img src="images/hotproduct_icon02.png" />
          <div class="review-box">
            <p style="margin-bottom: 52px">
              绝对5星，音质挺好，包装也不错，物流也快
            </p>
            <h1>来自于 星星活火 的评价</h1>
            <a>小米活塞耳机 标准版</a><span style="color: #ff6700">49.9元</span>
          </div>
        </div>
        <div class="review-card">
          <img src="images/hotproduct_icon03.png" />
          <div class="review-box">
            <p style="margin-bottom: 52px">
              做工没的说，摸起来非常细腻，而且比传统的插板稳固
            </p>
            <h1>来自于 林新城 的评价</h1>
            <a>小米插线板</a><span style="color: #ff6700">49元</span>
          </div>
        </div>
        <div class="review-card" style="margin-right: 0">
          <img src="images/hotproduct_icon04.png" />
          <div class="review-box">
            <p style="margin-bottom: 52px">
              一如既往的发烧体验，炫酷外形，人性的设计，动听的音质！高低音表现平衡
            </p>
            <h1>来自于 人生如戏 的评价</h1>
            <a>小米头戴式耳机 标准版</a
            ><span style="color: #ff6700">499元</span>
          </div>
        </div>
        <div class="clearfix"></div>
      </div>
      <div class="container">
        <div class="section-title content-title">内容</div>
        <div class="content-card" style="border-top: 1px solid #ffac13">
          <ul>
            <li style="font-size: 16px; color: #ffac13; margin-bottom: 25px">
              图书
            </li>
            <li style="margin-bottom: 10px">
              <a href="#" style="font-size: 20px; color: #333"
                >阿弥陀佛，么么哒</a
              >
            </li>
            <li style="font-size: 12px; color: #b0b0b0; margin-bottom: 5px">
              大冰新书，12个不舍得读完的、暖心
            </li>
            <li style="font-size: 12px; color: #b0b0b0; margin-bottom: 20px">
              的，真实的江湖故事
            </li>
            <li>9.99元</li>
            <li>
              <img
                src="images/classify_icon01.png"
                style="margin-left: auto; margin-right: auto; margin-top: 32px"
              />
            </li>
          </ul>
        </div>
        <div class="content-card" style="border-top: 1px solid #83c44e">
          <ul>
            <li style="font-size: 16px; color: #83c44e; margin-bottom: 25px">
              主题
            </li>
            <li style="margin-bottom: 10px">
              <a href="#" style="font-size: 20px; color: #333">主题市场</a>
            </li>
            <li style="font-size: 12px; color: #b0b0b0; margin-bottom: 5px">
              众多个性主题、百变锁屏与自由桌面
            </li>
            <li style="font-size: 12px; color: #b0b0b0; margin-bottom: 20px">
              让你的手机与众不同！
            </li>
            <li>MIUI</li>
            <li>
              <img
                src="images/classify_icon02.png"
                style="margin-left: auto; margin-right: auto; margin-top: 15px"
              />
            </li>
          </ul>
        </div>
        <div class="content-card" style="border-top: 1px solid #e53935">
          <ul>
            <li style="font-size: 16px; color: #e53935; margin-bottom: 25px">
              游戏
            </li>
            <li style="margin-bottom: 10px">
              <a href="#" style="font-size: 20px; color: #333"
                >米柚手游模拟器</a
              >
            </li>
            <li style="font-size: 12px; color: #b0b0b0; margin-bottom: 39px">
              在电脑上玩遍小米所有手游
            </li>
            <li>免费</li>
            <li>
              <img
                src="images/classify_icon03.png"
                style="margin-left: auto; margin-right: auto; margin-top: 47px"
              />
            </li>
          </ul>
        </div>
        <div
          class="content-card"
          style="margin-right: 0; border-top: 1px solid #2196f3"
        >
          <ul>
            <li style="font-size: 16px; color: #2196f3; margin-bottom: 25px">
              应用
            </li>
            <li style="margin-bottom: 10px">
              <a href="#" style="font-size: 20px; color: #333">2015年度应用</a>
            </li>
            <li style="font-size: 12px; color: #b0b0b0; margin-bottom: 39px">
              精彩世界，尽情下载
            </li>
            <li>免费</li>
            <li>
              <img
                style="margin-left: auto; margin-right: auto; margin-top: 46px"
                src="images/classify_icon04.png"
              />
            </li>
          </ul>
        </div>
        <div class="clearfix"></div>
      </div>
      <div class="container" style="padding-bottom: 60px">
        <div class="section-title video-title">
          视频
          <img style="float: right" src="images/hardware_morebtn.png" />
          <a
            href="#"
            style="
              float: right;
              font-size: 18px;
              margin-right: 10px;
              color: #333;
            "
            >查看更多</a
          >
        </div>
        <div class="video-card">
          <img class="play-icon" src="images/video_play.png" />
          <img src="images/video_icon01.jpg" />
          <h1
            style="
              font-size: 14px;
              font-weight: normal;
              color: #333;
              margin-top: 30px;
              margin-bottom: 12px;
            "
          >
            笑喷了，沈腾爆笑出演，6集联播
          </h1>
          <h2 style="font-size: 12px; font-weight: normal; color: #b0b0b0">
            小米Max沈腾爆笑预告全集
          </h2>
        </div>
        <div class="video-card">
          <img class="play-icon" src="images/video_play.png" />
          <img src="images/video_icon02.jpg" />
          <h1
            style="
              font-size: 14px;
              font-weight: normal;
              color: #333;
              margin-top: 30px;
              margin-bottom: 12px;
            "
          >
            小米2016春季新品发布会
          </h1>
          <h2 style="font-size: 12px; font-weight: normal; color: #b0b0b0">
            小米5 十余项黑科技亮相
          </h2>
        </div>
        <div class="video-card">
          <img class="play-icon" src="images/video_play.png" />
          <img src="images/video_icon03.jpg" />
          <h1
            style="
              font-size: 14px;
              font-weight: normal;
              color: #333;
              margin-top: 30px;
              margin-bottom: 12px;
            "
          >
            15秒了解小米5 有多快
          </h1>
          <h2 style="font-size: 12px; font-weight: normal; color: #b0b0b0">
            华少用超快语速告诉你小米5 到底有多快
          </h2>
        </div>
        <div class="video-card" style="margin-right: 0">
          <img class="play-icon" src="images/video_play.png" />
          <img src="images/video_icon04.jpg" />
          <h1
            style="
              font-size: 14px;
              font-weight: normal;
              color: #333;
              margin-top: 30px;
              margin-bottom: 12px;
            "
          >
            《去探索》 小米年度品牌视频
          </h1>
          <h2 style="font-size: 12px; font-weight: normal; color: #b0b0b0">
            与小米一起探索黑科技
          </h2>
        </div>
        <div class="clearfix"></div>
      </div>
      <div class="clearfix"></div>
    </div>
    <div class="footer-area">
      <div class="footer">
        <ul>
          <li
            style="
              background: url(images/footer_icon01.png) no-repeat 40px center;
            "
          >
            <a href="#">1小时快修服务</a>
          </li>
          <li
            style="
              background: url(images/footer_icon02.png) no-repeat 40px center;
            "
          >
            <a href="#">7天无理由退货</a>
          </li>
          <li
            style="
              background: url(images/footer_icon03.png) no-repeat 40px center;
            "
          >
            <a href="#">15天免费换修</a>
          </li>
          <li
            style="
              background: url(images/footer_icon04.png) no-repeat 40px center;
            "
          >
            <a href="#">满150元包邮</a>
          </li>
          <li
            style="
              background: url(images/footer_icon05.png) no-repeat 40px center;
            "
          >
            <a href="#">520余家售后网点</a>
          </li>
          <div class="clearfix"></div>
        </ul>
        <div class="footer-line"></div>
        <dl>
          <dd style="font-size: 14px; color: #424242; margin-bottom: 28px">
            帮助中心
          </dd>
          <dd><a href="#">购物指南</a></dd>
          <dd><a href="#">支付方式</a></dd>
          <dd><a href="#">配送方式</a></dd>
        </dl>
        <dl>
          <dd style="font-size: 14px; color: #424242; margin-bottom: 28px">
            服务支持
          </dd>
          <dd><a href="#">售后政策</a></dd>
          <dd><a href="#">自助服务</a></dd>
          <dd><a href="#">相关下载</a></dd>
        </dl>
        <dl>
          <dd style="font-size: 14px; color: #424242; margin-bottom: 30px">
            线下门店
          </dd>
          <dd><a href="#">小米之家</a></dd>
          <dd><a href="#">服务网点</a></dd>
          <dd><a href="#">线下专区</a></dd>
        </dl>
        <dl>
          <dd style="font-size: 14px; color: #424242; margin-bottom: 28px">
            关于小米
          </dd>
          <dd><a href="#">了解小米</a></dd>
          <dd><a href="#">加入小米</a></dd>
          <dd><a href="#">联系我们</a></dd>
        </dl>
        <dl>
          <dd style="font-size: 14px; color: #424242; margin-bottom: 28px">
            关注我们
          </dd>
          <dd><a href="#">新浪微博</a></dd>
          <dd><a href="#">小米部落</a></dd>
          <dd><a href="#">官方微信</a></dd>
        </dl>
        <dl style="margin-right: 123px">
          <dd style="font-size: 14px; color: #424242; margin-bottom: 28px">
            特色服务
          </dd>
          <dd><a href="#">F码通道</a></dd>
          <dd><a href="#">小米移动</a></dd>
          <dd><a href="#">防伪查询</a></dd>
        </dl>
        <div
          style="
            width: 1px;
            height: 111px;
            float: left;
            background-color: #e0e0e0;
            margin-top: 10px;
          "
        ></div>
        <div class="online-box">
          <p style="font-size: 20px; color: #ff6700; margin-bottom: 10px">
            400-100-5678
          </p>
          <p style="font-size: 12px; color: #616161; margin-bottom: 7px">
            周一至周日 8:00-18:00
          </p>
          <p style="font-size: 12px; color: #616161; margin-bottom: 18px">
            （仅收市话费）
          </p>
          <div class="online-service">24小时在线客服</div>
        </div>
        <div class="clearfix"></div>
      </div>
    </div>
      <div class="partners-area">
      <div class="partners">
        <div class="logo-mark"><img src="images/team_logo.png" /></div>
        <div style="width: 880px; float: left; margin-bottom: 30px">
          <p>
            <a href="#">小米网</a><a href="#">MIUI</a><a href="#">米聊</a
            ><a href="#">多看书城</a><a href="#">小米路由器</a
            ><a href="#">视频电话</a><a href="#">小米后院</a
            ><a href="#">小米天猫店</a><a href="#">小米淘宝直营店</a
            ><a href="#">小米网盟</a><a href="#">问题反馈</a
            ><a href="#">Select Region</a>
          </p>
          <p style="margin-left: 5px">
            ©mi.com京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号
            京网文[2014]0059-0009号 违法和不良信息举报 电话：185-0130-1238
          </p>
          <p style="margin-left: 5px">
            本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
          </p>
          <div class="clearfix"></div>
        </div>
        <div class="security">
          <img
            style="float: left; margin-right: 5px"
            src="images/safe_icon01.png"
          />
          <span>诚信网站师范企业</span>
          <img
            style="float: left; margin-right: 5px"
            src="images/safe_icon02.png"
          />
          <span>可信网站信用评价</span>
          <img
            style="float: left; margin-right: 5px"
            src="images/safe_icon03.png"
          />
          <span style="margin-right: 0">网上交易保障中心</span>
          <div class="clearfix"></div>
        </div>
      </div>
      <div class="clearfix"></div>
      <div class="tagline">探索黑科技，小米为发烧而生</div>
    </div>
    <script>
      (function () {
        var hero = document.querySelector(".carousel");
        var track = hero.querySelector(".carousel-track");
        var nextBtn = hero.querySelector(".arrow-next");
        var prevBtn = hero.querySelector(".arrow-prev");
        var dots = hero.querySelectorAll(".dots .dot");
        var index = 0;
        var count = track ? track.children.length : 0;
        var animating = false;
        var duration = 600;
        function update() {
          animating = true;
          track.style.transform = "translateX(" + -1226 * index + "px)";
          for (var i = 0; i < dots.length; i++) {
            dots[i].classList.remove("active");
          }
          dots[index].classList.add("active");
          setTimeout(function () {
            animating = false;
          }, duration);
        }
        function next() {
          if (animating) return;
          index = (index + 1) % count;
          update();
        }
        function prev() {
          if (animating) return;
          index = (index - 1 + count) % count;
          update();
        }
        var timer = setInterval(next, 3000);
        hero.addEventListener("mouseenter", function () {
          clearInterval(timer);
        });
        hero.addEventListener("mouseleave", function () {
          timer = setInterval(next, 3000);
        });
        nextBtn.addEventListener("mouseenter", function () {
          var img = nextBtn.querySelector("img");
          if (img) img.src = "images/arrow_rightbtn.png";
        });
        nextBtn.addEventListener("mouseleave", function () {
          var img = nextBtn.querySelector("img");
          if (img) img.src = "images/arrow_rightbtn01.png";
        });
        prevBtn.addEventListener("mouseenter", function () {
          var img = prevBtn.querySelector("img");
          if (img) img.src = "images/arrow_leftbtn.png";
        });
        prevBtn.addEventListener("mouseleave", function () {
          var img = prevBtn.querySelector("img");
          if (img) img.src = "images/arrow_leftbtn01.png";
        });
        nextBtn.addEventListener("click", next);
        prevBtn.addEventListener("click", prev);
        for (var i = 0; i < dots.length; i++) {
          (function (n) {
            dots[n].addEventListener("click", function () {
              index = n;
              update();
            });
          })(i);
        }
      })();
    </script>
  </body>
</html>
